<template>
  <div class="box">
    <!-- 按钮区域 -->
    <btns :loadData="loadData" :page="page" />
    <!-- 表格 -->
    <dataTable :page="page" :roles="roles" :total="total" :loadData="loadData" />
  </div>
</template>

<script>
import btns from './ui/btns.vue'
import dataTable from './ui/dataTable.vue'
import { rolesApi } from '@/api/roleApi'
export default {
  props: ['page'],
  components: {
    btns,
    dataTable
  },
  data() {
    return {
      roles: [],
      total: 0
    }
  },
  mounted() {
    this.loadData(this.page)
  },
  methods: {
    async loadData(page) {
      let ret = await rolesApi(page)
      this.roles = ret.data.roles
      this.total = ret.data.total
    }
  }
}
</script>

<style lang="scss" scoped></style>
